<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --accent-gold: #d4af37;
            --text-light: #f8f8f8;
            --text-muted: #a0a0a0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--primary-bg);
            color: var(--text-light);
            overflow-x: hidden;
        }
        
        .nav-blur {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .profile-card {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .stat-card {
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
        }
        
        .photo-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .photo-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
        }
        
        .tab-button {
            transition: all 0.3s ease;
        }
        
        .tab-button.active {
            background: var(--accent-gold);
            color: black;
        }
        
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--accent-gold);
            border-radius: 50%;
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
        }
        
        .avatar-upload {
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .avatar-upload:hover .avatar-overlay {
            opacity: 1;
        }
        
        .avatar-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .modal {
            backdrop-filter: blur(20px);
            background: rgba(0, 0, 0, 0.8);
        }
        
        .modal-content {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body>
    <!-- Floating Particles Background -->
    <div class="floating-particles" id="particles"></div>
    
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-xl font-bold gradient-text">Gallery</a>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="index.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">首页</a>
                        <a href="gallery.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">照片墙</a>
                        <a href="upload.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">上传</a>
                        <a href="about.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">关于</a>
                    </div>
                </div>
                
                <!-- User Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <div id="user-menu" class="hidden items-center space-x-3">
                        <button id="user-menu-btn" class="flex items-center space-x-2 text-yellow-400">
                            <img id="user-avatar" src="resources/default-avatar.jpg" alt="头像" class="w-8 h-8 rounded-full">
                            <span id="username" class="text-sm font-medium"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                    <a href="login.html" id="login-btn" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">登录</a>
                    <a href="register.html" id="register-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg text-sm font-medium transition-colors">注册</a>
                </div>
            </div>
        </div>
        
        <!-- User Dropdown Menu -->
        <div id="user-dropdown" class="hidden absolute right-4 top-16 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 z-50">
            <div class="py-2">
                <a href="profile.html" class="block px-4 py-2 text-sm text-yellow-400 bg-gray-700">个人中心</a>
                <a href="upload.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">上传照片</a>
                <a href="gallery.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">我的照片</a>
                <hr class="border-gray-700">
                <button id="logout-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-red-400 transition-colors">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- Profile Section -->
    <section class="pt-24 pb-16 px-4">
        <div class="max-w-6xl mx-auto">
            <!-- User Info Card -->
            <div class="profile-card rounded-2xl p-8 mb-8">
                <div class="flex flex-col md:flex-row items-center md:items-start space-y-6 md:space-y-0 md:space-x-8">
                    <!-- Avatar -->
                    <div class="avatar-upload">
                        <img id="profile-avatar" src="resources/default-avatar.jpg" alt="头像" class="w-32 h-32 rounded-full object-cover border-4 border-yellow-500">
                        <div class="avatar-overlay">
                            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <input type="file" id="avatar-input" accept="image/*" class="hidden">
                    </div>
                    
                    <!-- User Info -->
                    <div class="flex-1 text-center md:text-left">
                        <h1 id="profile-name" class="text-3xl font-bold mb-2">用户名</h1>
                        <p id="profile-email" class="text-gray-400 mb-4">user@example.com</p>
                        <p id="profile-bio" class="text-gray-300 mb-6 max-w-2xl">个人简介</p>
                        
                        <div class="flex flex-wrap justify-center md:justify-start gap-4 mb-6">
                            <button onclick="editProfile()" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-lg font-medium transition-all">
                                编辑资料
                            </button>
                            <button onclick="changePassword()" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg font-medium transition-all">
                                修改密码
                            </button>
                        </div>
                        
                        <div class="flex flex-wrap justify-center md:justify-start gap-6 text-sm text-gray-400">
                            <span>加入时间：<span id="join-date">2025年1月</span></span>
                            <span>最后登录：<span id="last-login">刚刚</span></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Statistics -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                <div class="stat-card bg-gray-800 rounded-xl p-6 text-center">
                    <div id="total-photos" class="text-3xl font-bold gradient-text mb-2">0</div>
                    <div class="text-gray-400 text-sm">总照片</div>
                </div>
                <div class="stat-card bg-gray-800 rounded-xl p-6 text-center">
                    <div id="total-views" class="text-3xl font-bold gradient-text mb-2">0</div>
                    <div class="text-gray-400 text-sm">总浏览</div>
                </div>
                <div class="stat-card bg-gray-800 rounded-xl p-6 text-center">
                    <div id="total-likes" class="text-3xl font-bold gradient-text mb-2">0</div>
                    <div class="text-gray-400 text-sm">总点赞</div>
                </div>
                <div class="stat-card bg-gray-800 rounded-xl p-6 text-center">
                    <div id="total-favorites" class="text-3xl font-bold gradient-text mb-2">0</div>
                    <div class="text-gray-400 text-sm">收藏数</div>
                </div>
            </div>

            <!-- Tabs -->
            <div class="flex flex-wrap gap-2 mb-8">
                <button onclick="switchTab('my-photos')" class="tab-button active px-6 py-3 rounded-lg font-medium">
                    我的照片
                </button>
                <button onclick="switchTab('favorites')" class="tab-button px-6 py-3 rounded-lg font-medium bg-gray-800 text-gray-300">
                    收藏夹
                </button>
                <button onclick="switchTab('albums')" class="tab-button px-6 py-3 rounded-lg font-medium bg-gray-800 text-gray-300">
                    相册
                </button>
                <button onclick="switchTab('settings')" class="tab-button px-6 py-3 rounded-lg font-medium bg-gray-800 text-gray-300">
                    设置
                </button>
            </div>

            <!-- Tab Content -->
            <div id="tab-content">
                <!-- My Photos Tab -->
                <div id="my-photos-tab" class="tab-content">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold">我的照片</h2>
                        <div class="flex space-x-2">
                            <button onclick="setPhotoLayout('grid')" class="p-2 bg-gray-800 rounded-lg text-gray-400 hover:text-yellow-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                                </svg>
                            </button>
                            <button onclick="setPhotoLayout('list')" class="p-2 bg-gray-800 rounded-lg text-gray-400 hover:text-yellow-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div id="my-photos-grid" class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        <!-- Photos will be loaded here -->
                    </div>
                </div>

                <!-- Favorites Tab -->
                <div id="favorites-tab" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-6">收藏夹</h2>
                    <div id="favorites-grid" class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                        <!-- Favorites will be loaded here -->
                    </div>
                </div>

                <!-- Albums Tab -->
                <div id="albums-tab" class="tab-content hidden">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-2xl font-bold">相册</h2>
                        <button onclick="createAlbum()" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-2 rounded-lg font-medium transition-all">
                            创建相册
                        </button>
                    </div>
                    <div id="albums-grid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- Albums will be loaded here -->
                    </div>
                </div>

                <!-- Settings Tab -->
                <div id="settings-tab" class="tab-content hidden">
                    <h2 class="text-2xl font-bold mb-6">账户设置</h2>
                    <div class="grid md:grid-cols-2 gap-8">
                        <div class="bg-gray-800 rounded-xl p-6">
                            <h3 class="text-xl font-semibold mb-4">隐私设置</h3>
                            <div class="space-y-4">
                                <label class="flex items-center justify-between">
                                    <span>默认上传为私有</span>
                                    <input type="checkbox" id="default-private" class="rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                                </label>
                                <label class="flex items-center justify-between">
                                    <span>允许他人评论</span>
                                    <input type="checkbox" id="allow-comments" checked class="rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                                </label>
                                <label class="flex items-center justify-between">
                                    <span>显示统计信息</span>
                                    <input type="checkbox" id="show-stats" checked class="rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                                </label>
                            </div>
                        </div>
                        
                        <div class="bg-gray-800 rounded-xl p-6">
                            <h3 class="text-xl font-semibold mb-4">通知设置</h3>
                            <div class="space-y-4">
                                <label class="flex items-center justify-between">
                                    <span>邮件通知</span>
                                    <input type="checkbox" id="email-notifications" checked class="rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                                </label>
                                <label class="flex items-center justify-between">
                                    <span>点赞通知</span>
                                    <input type="checkbox" id="like-notifications" checked class="rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                                </label>
                                <label class="flex items-center justify-between">
                                    <span>评论通知</span>
                                    <input type="checkbox" id="comment-notifications" checked class="rounded border-gray-600 text-yellow-500 focus:ring-yellow-500/20">
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <button onclick="saveSettings()" class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-lg font-semibold transition-all">
                            保存设置
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-12 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <div class="mb-8">
                <h3 class="text-2xl font-bold gradient-text mb-4">Gallery</h3>
                <p class="text-gray-400 max-w-md mx-auto">
                    用心记录每一个美好瞬间，用镜头诉说生活的故事
                </p>
            </div>
            <div class="border-t border-gray-800 pt-8">
                <p class="text-gray-500">
                    © 2025 Gallery. 保留所有权利。
                </p>
            </div>
        </div>
    </footer>

    <!-- Edit Profile Modal -->
    <div id="edit-profile-modal" class="modal fixed inset-0 z-50 hidden flex items-center justify-center">
        <div class="modal-content rounded-2xl p-8 max-w-md w-full mx-4">
            <h3 class="text-2xl font-bold mb-6">编辑个人资料</h3>
            <form id="edit-profile-form" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">昵称</label>
                    <input type="text" id="edit-nickname" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-yellow-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">个人简介</label>
                    <textarea id="edit-bio" rows="3" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:border-yellow-500 resize-none"></textarea>
                </div>
                <div class="flex space-x-4 pt-4">
                    <button type="submit" class="flex-1 bg-yellow-500 hover:bg-yellow-600 text-black py-3 rounded-lg font-semibold transition-all">
                        保存
                    </button>
                    <button type="button" onclick="closeEditModal()" class="flex-1 bg-gray-600 hover:bg-gray-700 text-white py-3 rounded-lg font-semibold transition-all">
                        取消
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="mode/auth.js"></script>
    <script src="mode/upload.js"></script>
    <script src="mode/main.js"></script>
    <script>
        // 创建浮动粒子
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 30;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // 加载用户资料
        function loadUserProfile() {
            const currentUser = authManager.getCurrentUser();
            if (!currentUser) {
                authManager.showMessage('请先登录', 'warning');
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 1000);
                return;
            }

            // 更新用户信息
            document.getElementById('profile-avatar').src = currentUser.avatar;
            document.getElementById('profile-name').textContent = currentUser.nickname || currentUser.username;
            document.getElementById('profile-email').textContent = currentUser.email;
            document.getElementById('profile-bio').textContent = currentUser.bio || '这个人很懒，什么都没有写...';
            document.getElementById('join-date').textContent = new Date(currentUser.joinDate).toLocaleDateString('zh-CN');
            document.getElementById('last-login').textContent = '刚刚';

            // 加载统计数据
            loadUserStats();
            
            // 加载照片
            loadMyPhotos();
        }

        // 加载用户统计数据
        function loadUserStats() {
            if (!window.uploadManager) return;
            
            const currentUser = authManager.getCurrentUser();
            const stats = window.uploadManager.getPhotoStats();
            
            if (stats) {
                document.getElementById('total-photos').textContent = stats.totalPhotos;
                document.getElementById('total-views').textContent = stats.totalViews;
                document.getElementById('total-likes').textContent = stats.totalLikes;
                document.getElementById('total-favorites').textContent = currentUser.favoritePhotos.length;
            } else {
                document.getElementById('total-photos').textContent = '0';
                document.getElementById('total-views').textContent = '0';
                document.getElementById('total-likes').textContent = '0';
                document.getElementById('total-favorites').textContent = '0';
            }
        }

        // 加载我的照片
        function loadMyPhotos() {
            if (!window.uploadManager) return;
            
            const currentUser = authManager.getCurrentUser();
            const userPhotos = window.uploadManager.getUserPhotos(currentUser.id);
            const photosGrid = document.getElementById('my-photos-grid');
            
            if (userPhotos.length === 0) {
                photosGrid.innerHTML = `
                    <div class="col-span-full text-center py-12">
                        <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <h3 class="text-xl font-semibold mb-2">还没有照片</h3>
                        <p class="text-gray-400 mb-4">开始上传您的第一张照片吧</p>
                        <a href="upload.html" class="bg-yellow-500 hover:bg-yellow-600 text-black px-6 py-3 rounded-lg font-semibold transition-all inline-block">
                            上传照片
                        </a>
                    </div>
                `;
                return;
            }
            
            photosGrid.innerHTML = userPhotos.map(photo => `
                <div class="photo-card bg-gray-800 rounded-lg overflow-hidden" onclick="viewPhoto('${photo.id}')">
                    <img src="${photo.url}" alt="${photo.title}" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-semibold text-white mb-2 truncate">${photo.title}</h3>
                        <p class="text-gray-400 text-sm mb-3 line-clamp-2">${photo.description}</p>
                        <div class="flex justify-between items-center text-xs text-gray-500 mb-3">
                            <span>${new Date(photo.uploadDate).toLocaleDateString()}</span>
                            <span class="px-2 py-1 bg-${photo.private ? 'red' : 'green'}-500 text-white rounded-full">${photo.private ? '私有' : '公开'}</span>
                        </div>
                        <div class="flex justify-between items-center text-xs text-gray-500">
                            <span>👁 ${photo.views}</span>
                            <span>❤️ ${photo.likes}</span>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 切换标签页
        function switchTab(tabName) {
            // 更新标签按钮状态
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
                btn.classList.add('bg-gray-800', 'text-gray-300');
            });
            
            event.target.classList.add('active');
            event.target.classList.remove('bg-gray-800', 'text-gray-300');
            
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.add('hidden');
            });
            
            // 显示选中的标签内容
            document.getElementById(tabName + '-tab').classList.remove('hidden');
            
            // 加载对应的内容
            switch(tabName) {
                case 'my-photos':
                    loadMyPhotos();
                    break;
                case 'favorites':
                    loadFavorites();
                    break;
                case 'albums':
                    loadAlbums();
                    break;
                case 'settings':
                    loadSettings();
                    break;
            }
        }

        // 编辑个人资料
        function editProfile() {
            const currentUser = authManager.getCurrentUser();
            document.getElementById('edit-nickname').value = currentUser.nickname || '';
            document.getElementById('edit-bio').value = currentUser.bio || '';
            document.getElementById('edit-profile-modal').classList.remove('hidden');
        }

        // 关闭编辑模态框
        function closeEditModal() {
            document.getElementById('edit-profile-modal').classList.add('hidden');
        }

        // 修改密码
        function changePassword() {
            authManager.showMessage('密码修改功能开发中...', 'info');
        }

        // 创建相册
        function createAlbum() {
            authManager.showMessage('相册功能开发中...', 'info');
        }

        // 保存设置
        function saveSettings() {
            authManager.showMessage('设置保存成功', 'success');
        }

        // 查看照片
        function viewPhoto(photoId) {
            authManager.showMessage('照片查看功能开发中...', 'info');
        }

        // 设置照片布局
        function setPhotoLayout(layout) {
            authManager.showMessage('布局切换功能开发中...', 'info');
        }

        // 加载收藏夹
        function loadFavorites() {
            const favoritesGrid = document.getElementById('favorites-grid');
            favoritesGrid.innerHTML = `
                <div class="col-span-full text-center py-12">
                    <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                    <h3 class="text-xl font-semibold mb-2">还没有收藏</h3>
                    <p class="text-gray-400">去照片墙发现喜欢的照片吧</p>
                </div>
            `;
        }

        // 加载相册
        function loadAlbums() {
            const albumsGrid = document.getElementById('albums-grid');
            albumsGrid.innerHTML = `
                <div class="col-span-full text-center py-12">
                    <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    <h3 class="text-xl font-semibold mb-2">还没有相册</h3>
                    <p class="text-gray-400">创建您的第一个相册吧</p>
                </div>
            `;
        }

        // 加载设置
        function loadSettings() {
            // 设置默认值
            document.getElementById('default-private').checked = false;
            document.getElementById('allow-comments').checked = true;
            document.getElementById('show-stats').checked = true;
            document.getElementById('email-notifications').checked = true;
            document.getElementById('like-notifications').checked = true;
            document.getElementById('comment-notifications').checked = true;
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            createParticles();
            loadUserProfile();
            
            // 编辑资料表单提交
            document.getElementById('edit-profile-form').addEventListener('submit', function(e) {
                e.preventDefault();
                const nickname = document.getElementById('edit-nickname').value;
                const bio = document.getElementById('edit-bio').value;
                
                if (authManager.updateUserInfo({ nickname, bio })) {
                    authManager.showMessage('个人资料更新成功', 'success');
                    closeEditModal();
                    loadUserProfile();
                } else {
                    authManager.showMessage('更新失败，请重试', 'error');
                }
            });
            
            // 头像上传
            document.getElementById('profile-avatar').addEventListener('click', function() {
                document.getElementById('avatar-input').click();
            });
            
            document.getElementById('avatar-input').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const newAvatar = e.target.result;
                        if (authManager.updateUserInfo({ avatar: newAvatar })) {
                            document.getElementById('profile-avatar').src = newAvatar;
                            authManager.showMessage('头像更新成功', 'success');
                        } else {
                            authManager.showMessage('头像更新失败', 'error');
                        }
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
</body>
</html>